window.addEventListener('load', function () {
  var sure = document.querySelector('.sure')
  var ul = document.querySelector('ul')
  var div = document.querySelector('div')
  var input_body = document.querySelector('#input_body')
  //每次刷新时将ul的窗口移到最下面
  ul.scrollTop = ul.scrollHeight
  //为sure确定按钮绑定点击事件
  sure.onclick = function () {
    //如果sure的父亲也就是div的第二个孩子是input或span获取它们的值
    if (this.parentNode.children[1].nodeName.toLowerCase() === 'input') { var value_n = this.parentNode.children[1].value }
    else {
      var value_n = this.parentNode.children[1].innerText
    }
    //如果值为空则弹出提示框
    if (value_n == '') { alert('你输入为空！') }
    else {
      //先移除input标签
      this.parentNode.removeChild(this.parentNode.children[1])
      //再先建一个span标签并且赋值并插入
      var span = document.createElement('span')
      span.innerText = value_n
      span.classList.add('input_name')
      this.parentNode.insertBefore(span, this.parentNode.children[1])
      //此时如果点击span标签则将span标签换成input标签并将值给它
      span.onclick = function () {
        var input = document.createElement('input')
        this.style.display = 'none'
        input.setAttribute('type', 'text')
        input.value = this.innerText
        input.placeholder = '姓名'
        input.classList.add('input_name')
        this.parentNode.insertBefore(input, this.parentNode.children[1])
        //获取焦点
        input.focus()
        this.parentNode.removeChild(this)
      }
    }
  }
  //文档监听事件（键盘按下触发事件）
  document.addEventListener('keydown', function (e) {
    if (e.key == 'Enter') {
      ajax_a()
    }
  })
  //封装ajax对象a方法
  function ajax_a() {
    //获取name里面的值
    if (div.children[0].children[1].nodeName.toLowerCase() === 'input') { var value_N = div.children[0].children[1].value }
    else { var value_N = div.children[0].children[1].innerText }
    //判断内容里是否有空
    if (value_N == '' || input_body.value == '') {
      alert('你输入为空！')
    }
    else {
      ajax({
        type: 'get',
        url: 'http://localhost:3000/post',
        data: {
          name: value_N,
          message: input_body.value
        },
        success: function (result) {
          console.log(result)
          input_body.value = ''
          var context = ''
          for (var i = 0; i < result.length; i++) {
            context += '<li>' + result[i].name + '说：' + result[i].message + '<span class="pull-right">' + result[i].dateTime + '</span>' + '</li>'
          }
          ul.innerHTML = context
          ul.scrollTop = ul.scrollHeight
        }
      })
    }
  }
  //封装ajax对象b的方法
  function ajax_b() {
    ajax({
      type: 'get',
      url: 'http://localhost:3000/pos',
      success: function (result) {
        var context = ''
        for (var i = 0; i < result.length; i++) {
          context += '<li>' + result[i].name + '说：' + result[i].message + '<span class="pull-right">' + result[i].dateTime + '</span>' + '</li>'
        }
        ul.innerHTML = context
        ul.scrollTop = ul.scrollHeight
      }
    })
  }
  //开启定时器时隔一秒发送请求
  var inter = setInterval(ajax_b, 1000)
  //鼠标移到ul对话框中，将清除定时器
  ul.onmouseover = function () {
    clearInterval(inter)
    //离开时又同步刷新定时器
    ul.onmouseout = function () {
      inter = setInterval(ajax_b, 1000)
    }
  }
})